<template>
  <div v-if="isTerminal" class="bg-black border-white border text-white font-Inconsolata bg-opacity-60">
    <div class=" overflow-y-auto h-full">
      <div>
        <span>></span>
        <input type="text" name="" id="" class="outline-none bg-transparent" @keydown.enter="handleCommand"
          ref="termInput">
      </div>
      <div ref="terminalOutput"></div>
    </div>
    <button @click="isTerminal = false" class="absolute right-4 top-0">
      <i class="ri-close-line text-3xl"></i>
    </button>
  </div>
</template>


<script setup>
import { useGlobalState } from "@/store";
import { watch, ref, nextTick } from "vue";
import results from '@/assets/result12.txt?raw'
import { rand } from '@vueuse/core'
const { isBurst } = useGlobalState();
const isTerminal = defineModel({ local: true, default: false })
const termInput = ref()
const terminalOutput = ref()
async function handleCommand() {
  if (termInput.value.value === './send.sh') {
    isBurst.value = true
    for (const result of results.split('\n')) {
      const newLine = document.createElement('p')
      newLine.innerHTML = result
      await sleep(rand(200,400))
      terminalOutput.value.append(newLine)
    }
  }
}
function sleep(sleepTime) {
  return new Promise(resolve => { setTimeout(resolve, sleepTime); });
}
watch(isTerminal, () => {
  if (isTerminal.value) {
    nextTick(() => termInput.value.focus())
  }
}, { immediate: true })
</script>